<template>
  <view>
    <scroll-view class="scroll-view"  scroll-y >
       <view class="item-body">
        <view class="items" v-for="(item,index) in content" :key="item">
            <view>{{item}}</view>
            <image v-if="((index + 1)  % 3) !== 0 && (index + 1) !== content.length"
             src="http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230428/a8f1c30c4d93e7c93af31aec9665faac.png" />
        </view>
       </view>
    </scroll-view>
    <view class="commit age" @click="cv"></view> 
    <view class="commit copy"  @click="reCommit"></view> 
  </view>
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
interface IProps {
    content:any
}
const props = withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:defStatus'])
const reCommit =()=>{
emit('update:defStatus',EnumStatus.STATUS)
}

const cv = ()=>{
    uni.setClipboardData({
	data: props.content,
	success: function () {
		uni.showToast({
            title:"复制成功"
        })
	}
});
}

</script>

<style lang="scss" scoped>
    .commit{
      z-index: 102;
      position: absolute;
      top: 87%;
      width: 40%;
      height: 100rpx;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    .age{
        left: 7%;
        background-image: url("http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230504/90a9dba2b6baf31c8254897c8cfb8053.png");
    }
    .copy{
        left: 53%;
        background-image: url('http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230428/cd05dcbb9fb7717f0541c72aa6514919.png');
    }
    .scroll-view{
        width: 80%;
        height: 450rpx;
        left: 10%;
        position: absolute;
        top: 45%;
        .item-body{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            font-size: 28rpx;
            padding: 20rpx;
            .items{
                display: flex;
                margin-bottom: 20rpx;
                align-items: center;
                view{
                    padding: 20rpx;
                    background: white;
                    border: 1rpx solid black;
                    box-shadow: 0  4rpx 4rpx rgba(0, 0, 0, 1); /* 设置黑色阴影 */
                    border-radius: 8rpx;
                }
                image{
                    width: 50rpx;
                    height: 25rpx;
                    margin-left: 8rpx;
                }
            }
        }
    }

</style>
